<template>
  <view class="container">
    <view class="form">
      <text class="label">修改内容</text>
      <input v-model="content" placeholder="傻瓜输入要修改的内容" class="input" />

      <text class="label">事件日期</text>
      <view class="uni-list">
        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="uni-input">{{ date || '呐呐呐，日期看好选，别又弄错哈' }}</view>
        </picker>
      </view>

      <view class="buttons">
        <button class="btn save-btn" @click="saveChanges">保存修改</button>
        <button class="btn delete-btn" @click="deleteEvent">删除事件</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',      // 保存输入的内容
      date: '',         // 保存选择的日期
      startDate: '2020-01-01', // 设置可选择日期的开始日期
      endDate: '2030-12-31',   // 设置可选择日期的结束日期
    };
  },
  methods: {
    bindDateChange(e) {
      this.date = e.detail.value;
    },
    saveChanges() {
      if (!this.content || !this.date) {
        return uni.showToast({ title: '请填写完整内容和日期', icon: 'none' });
      }
      console.log('保存修改', { content: this.content, date: this.date });
    },
    deleteEvent() {
      uni.showModal({
        title: '确认删除',
        content: '你确定要删除该事件吗?',
        success: (res) => {
          if (res.confirm) {
            console.log('删除事件');
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 20px;
  background-color: #fffafc;
  animation: fadeIn 1s ease-in-out;
}

.form {
  margin-top: -80px;
  animation: slideIn 0.5s ease-in-out;
  width: 100%;
  max-width: 500px;
}

.label {
  font-size: 18px;
  color: #f477ba;
  margin-bottom: 10px;
}

.input {
  width: 90%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #f477ba;
  margin-bottom: 20px;
  background-color: #fff;
  font-size: 16px;
}

.uni-list {
  margin-bottom: 20px;
  transition: opacity 0.3s ease-in-out;
}

.uni-input {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #f477ba;
  color: #333;
  background-color: #fff;
  font-size: 16px;
  transition: background-color 0.3s ease;
  width: 90%;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  padding: 15px;
  border-radius: 12px;
  width: 48%;
  text-align: center;
  font-size: 18px;
}

.save-btn {
  background: linear-gradient(to right, #f477ba, #fbb1d4);
  color: white;
}

.delete-btn {
  background: linear-gradient(to right, #ff4d4f, #ff7f7f);
  color: white;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
